import React, { Component } from "react";
import { NavBar, Icon, SearchBar } from "antd-mobile";
import { withRouter } from "react-router-dom";
import "./search.scss";
import axios from "../../axios/myaxios";
import img from "../../assets/images/1.png";
class search extends Component {
  state = {
    value: "",
    arr: [],
  };
  onChange(value) {
    this.setState({
      value,
    });
  }
  handleClick(e){
    let id=e.target.getAttribute("data-index")
    this.props.history.push("/goods/"+id)
  }
  
  // 发送请求
  CancelHandle() {
    axios
      .get("/goods/qsearch", {
        params: { query: this.state.value },
      })
      .then((res) => {
        this.setState({
          arr: res,
          value: "",
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }

  render() {
    return (
      // 搜索页面
      <div className="ygshopSearch">
        {/* 标题栏开始 */}
        <div className="ygshopSearch_title">
          <NavBar
            icon={<Icon type="left" />}
            onLeftClick={() => this.props.history.go(-1)}
          >
            搜索中心
          </NavBar>
        </div>
        {/* 标题栏结束 */}
        {/* 搜索栏开始 */}
        <div className="ygshopSearch_sou">
          <SearchBar
            value={this.state.value}
            placeholder="搜索"
            cancelText="搜索"
            onSubmit={this.CancelHandle.bind(this)}
            onCancel={this.CancelHandle.bind(this)}
            showCancelButton
            onChange={this.onChange.bind(this)}
          />
        </div>
        {/* 搜索栏结束 */}
        {/* 内容开始 */}
        <div className="ygshopSearch_cont" onClick={this.handleClick.bind(this)}>
          {this.state.arr.map((v) => (
            <div className="cont_items" key={v.goods_id} data-index={v.goods_id}>
              <img src={img} alt="暂无图片"  data-index={v.goods_id}/>
              <div className="cont_item"  data-index={v.goods_id}>{v.goods_name}</div>
            </div>
          ))}
        </div>
        {/* 内容结束 */}
      </div>
    );
  }
}
export default withRouter(search);
